<template>
    <div class="box">
        <AppPageTopInfo :title="userInfo.data.user.type === 'admin' ? '管理员' : userInfo.data.user.type === 'master'
            ? '校长' : userInfo.data.user.type === 'teacher'
                ? '老师' : '学生' + '的个人信息'" subTitle="想象，创造和分享，用编程创造美好未来！">

        </AppPageTopInfo>
        <div class="px-6">
            <div class="course-group mb-0 d-flex">
                <div class="flex items-center justify-between ">
                    <div class="flex items-center">
                        <img :src="user.avatar" alt="" class="rounded-full" style="width:100px;height: 100px;">
                        <div class="ml-4">
                            <h4>{{ userInfo.data.user.name }}</h4>
                            <p class="text-ms">注册时间：</p>
                            <p class="text-ms">最后登录时间：</p>
                        </div>
                    </div>

                    <app-upload-img v-model="user.avatar" />

                </div>
            </div>
            <div class="my-6">
                <div class="personal-info-head">
                    <h4>修改个人信息</h4>
                </div>

                <form action="#">
                    <div class="w-1/2">
                        <div class="form-group">
                            <label class="form-control-label">姓名</label>
                            <input type="text" class="form-control" placeholder="Enter your first Name">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">昵称</label>
                            <input type="text" class="form-control" placeholder="Enter your last Name">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">电话</label>
                            <input type="text" class="form-control" placeholder="Enter your Phone">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">邮箱</label>
                            <input type="text" class="form-control" placeholder="Enter your Email">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">个人签名</label>
                            <input type="text" class="form-control" placeholder="Birth of Date">
                        </div>
                    </div>



                    <div class="update-profile">
                        <button type="button" class="btn btn-primary">更新个人信息</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script setup>
import useUserInfo from '@/store/user'
const userInfo = useUserInfo()
const user = reactive({
    avatar: userInfo.data.user.avatar
})
</script>